import { View, Text, Image } from "@tarojs/components";
import Taro, { useLoad } from "@tarojs/taro";
import { useEffect, useState } from "react";
import InfiniteLoading from "../../components/InfiniteLoading";
import InfiniteLoadingFoot from "../../components/InfiniteLoadingFoot";
import { delWrong, selectExamWrongs, selectWrongTotal } from "../../api/ceshi";
import { baseUrl } from "../../utils/request";
import { iconDelRed } from "../../assets/files";
import usePage from "../../hooks/usePage";
import "./index.scss";

export default function TextRecordDetailError() {
  const [questionType, setQuestionType] = useState([
    {
      id: 1,
      name: "单选题",
      color: '#6486FF',
      bgColor: 'rgba(65, 95, 255, 0.05)'
    },
    {
      id: 2,
      name: "多选题",
      color: '#44C0E8',
      bgColor: 'rgba(65, 221, 255, 0.05)'
    },
    {
      id: 3,
      name: "判断题",
      color: '#FF8964',
      bgColor: 'rgba(255, 145, 65, 0.05)'
    },
  ]);

  const [params, setParams] = useState({ pageSize: 10, questionType: "" });
  const { listData, refreshing, empty, loadMore, onPull, onLoad } = usePage({
    request: selectExamWrongs,
    params,
  });

  useEffect(() => {
    getTotal()
  }, [])

  const [total, setTotal] = useState({})
  async function getTotal() {
    const { data } = await selectWrongTotal({})
    setTotal(data)
  }

  function matchType(type) {
    for (let index = 0; index < questionType.length; index++) {
      const element = questionType[index];
      if (element.id === type) {
        return element
      }

    }
  }

  function changeStatus(cur) {
    setParams({
      ...params,
      questionType: cur
    })
  }


  function remove(wrongId) {

    Taro.showModal({
      title: "温馨提示",
      content: wrongId ? '是否移除该错题？' : "是否移除您的全部错题",
      complete(res) {
        console.log(res);
        if (res.confirm) {
          console.log("交卷");
          removeApi(wrongId)
        }
      }
    })



  }

  async function removeApi(wrongId) {
    const { success } = await delWrong({ wrongId })
    if (success) {
      Taro.showToast({ title: '移除成功', icon: 'none' })
      onPull()
      getTotal()
    }
  }


  return (
    <View className="wrap">
      <View className="cuotiWrap">
        {/* <View>
          <Text className="ctit">总错题</Text>
        </View> */}
        <View className="cuoWrap">
          <View className="daoWrap">
            <Text className="ctit">总错题</Text>
            <Text className="cNum">{total.allTotal}</Text>
            <Text className="dao">道</Text>
          </View>
          <View onClick={() => remove("")} className="delWrap">
            <Text className="deltit">移除全部错题</Text>
            <Image className="icondel" src={iconDelRed} />
          </View>
        </View>
      </View>

      <View className="btnView">
        <View onClick={() => changeStatus("")} className={params.questionType === "" ? "btnWrapSelect" : "btnWrap"}>
          <Text>全部({total.allTotal})</Text>
        </View>
        <View onClick={() => changeStatus(1)} className={params.questionType === 1 ? "btnWrapSelect" : "btnWrap"}>
          <Text>单选({total.singleChoiceTotal})</Text>
        </View>
        <View onClick={() => changeStatus(2)} className={params.questionType === 2 ? "btnWrapSelect" : "btnWrap"}>
          <Text>多选({total.multipleChoiceTotal})</Text>
        </View>
        <View onClick={() => changeStatus(3)} className={params.questionType === 3 ? "btnWrapSelect" : "btnWrap"}>
          <Text>判断({total.judgmentTotal})</Text>
        </View>
      </View>

      <View className={"list-wrapper"}>
        <InfiniteLoading
          empty={empty}
          onLoad={onLoad}
          onRefresh={onPull}
          refreshing={refreshing}
        >
          {listData?.map((item, index) => {

            return (
              <View className="reWrap" key={index} >
                {/* <View className="reTypeWrap" style={{ backgroundColor: matchType(item.questionType).bgColor }}>
                  <Text className="reTypeText" style={{ color: matchType(item.questionType).color, }}>{matchType(item.questionType).name}</Text>
                </View> */}
                <View className="reTitWrap">
                  <View className="retitTop">
                    <View className="reTypeWrap">
                      <View className="bss"></View>
                      <Text className="questionType" style={{}}>{matchType(item.questionType).name}</Text>
                      <View className="ftype">
                        <Text>{item.questionTypeName}</Text>
                      </View>
                    </View>

                    <Text className="questTit">
                      {/* <Text className="reTypeText" style={{ color: matchType(item.questionType).color, backgroundColor: matchType(item.questionType).bgColor }}>
                        {matchType(item.questionType).name}    
                        </Text> */}
                      {index + 1}.{item.questionSubject}
                    </Text>
                  </View>



                  <View className="reItemWrap">
                    {
                      item?.optionMiniResponses.map((v, i) => {
                        return (
                          <View className="reItem" key={i}>
                            <View className={
                              v.isUserOption === 1 ?
                                (v.isRightOption === 1 && v.isUserOption === v.isRightOption && item.examResult === 1) ? "tagWrapSelect" : 'tagRedWrap' :
                                "tagWrap"
                            }>
                              <Text style={{ color: v.isUserOption === 1 ? "#fff" : '#212121' }} className="tagName">{v.questionOption}</Text>
                            </View>
                            {
                              v.optionType === 1 ?
                                <Text className="reContent">{v.optionContent}</Text>
                                :
                                <Image className="ansImgSty" src={baseUrl + v.optionContent} />
                            }

                          </View>
                        )
                      })
                    }
                  </View>
                </View>

                {
                item?.rightQuestionOptions?.length <5 ?

                  <View className="myAns">
                    <View>
                      <Text>正确答案：</Text>
                      <Text style={{ color: '#54C8A1' }}>
                        {
                          item.rightQuestionOptions.map((v, i) => {
                            return v.questionOption + " "
                          })
                        }
                      </Text>
                    </View>
                    <View>
                      <Text>我的答案：</Text>
                      <Text style={{ color: item.examResult === 1 ? '#54C8A1' : '#FA615C' }}>
                        {
                          item.userQuestionOptions.map((v, i) => {
                            return v.questionOption + " "
                          })
                        }
                      </Text>
                    </View>
                  </View>
                  :
                  <View className="myAnsTwo">
                    <View>
                      <Text>正确答案：</Text>
                      <Text style={{ color: '#54C8A1' }}>
                        {
                          item.rightQuestionOptions.map((v, i) => {
                            return v.questionOption + " "
                          })
                        }
                      </Text>
                    </View>
                    <View>
                      <Text>我的答案：</Text>
                      <Text style={{ color: item.examResult === 1 ? '#54C8A1' : '#FA615C' }}>
                        {
                          item.userQuestionOptions.map((v, i) => {
                            return v.questionOption + " "
                          })
                        }
                      </Text>
                    </View>
                  </View>
              }

                <View className="geer">
                  <Text className="addtime">加入时间：{item.wrongCreatedAt}</Text>
                  <View onClick={() => remove(item.wrongId)} className="geff">
                    <Text style={{ color: "#FF2E2E" }}>移除错题</Text>
                  </View>
                </View>

              </View>
            )

          })}
          {listData?.length > 0 && <InfiniteLoadingFoot state={loadMore} />}
        </InfiniteLoading>
      </View>



    </View>
  );
}
